<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<!-- top logo -->
		<view class="top-view flex row aCenter">
			<image class="top-logo" src="../../static/pty_logo.png"></image>
			<view class="top-right flex">
				<text class="top-name">派对兔酒吧</text>
				<text class="top-z">桌位号: {{table_number?table_number:'空'}}</text>
			</view>
		</view>
		<!-- 餐车列表 -->
		<view class="content-view flex-1 flex">
			<text class="content-title">餐车详情：</text>
			<view class="flex-1 overflow-hidden" style="position: relative;">
				<scroll-view scroll-y class="screen-all" style="position: absolute;">
					<view>
						<view class="item-view flex row" v-for="(item, index) in goodsList">
							<image class="item-icon" :src="'https://rabbit.jiujingwulian.com' + item.goods_image">
							</image>
							<view class="flex flex-1">
								<text class="item-title">{{ item.goods_name }}</text>
								<view class="item-pn-view flex row aCenter">
									<text class="item-price">¥{{ item.shop_price }}</text>
									<text class="item-num">x{{ item.num?item.num:1 }}</text>
								</view>
								<text class="item-scp">{{ item.spec_name ? '规格:【'+item.spec_name+'】':'' }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<text class="content-totle discount-price">优惠券：-¥{{discount_price}}</text>
			<text class="content-totle">合计：¥{{total_price}}</text>
		</view>
		<!-- 备注信息 -->
		<view class="mark-view flex">
			<text class="content-title">备注：</text>
			<textarea class="textarea-view" v-model="marks" placeholder="请输入备注信息">

			</textarea>
		</view>
		<!-- 提交订单 -->
		<view class="btm-view flex row aCenter">
			<text class="btm-price">共{{goodsNum ? goodsNum : 0}}件 ¥{{total_price}}</text>
			<view class="btn-view flex center" @click="submitOrder()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartIds: '',

				goodsList: [],
				goodsItem: {},
				total_price: 0,
				table_number: '',
				discount_price: 0,

				goodsNum: 0,

				invite_code: '',
				marks: '',

				coupon_id: '',
				goods_id: '',
			}
		},
		onLoad(option) {
			this.getGoodsInfo(option.order);
			// this.cartSettle();
			this.coupon_id = option.coupon_id;
			this.goods_id = option.goods_id;

			// 桌位id
			this.invite_code = uni.getStorageSync("invite_code");
		},
		methods: {
			getGoodsInfo(order) {
				let data = JSON.parse(order);

				this.goodsList = [data.goods];
				this.goodsItem = data;

				//订单价格
				this.total_price = data.total_price;
				//桌位号
				this.table_number = data.table_number;
				//优惠价格
				this.discount_price = data.discount_price;

				this.goodsNum = 1;

				console.log(data);
			},
			// api/order/cart_settle
			// 写在上个页面
			// cartSettle(){
			// 	let params = {
			// 		token: uni.getStorageSync("token"),
			// 		cart_id: this.cartIds, //购物车id
			// 	}
			// 	console.log(params);
			// 	this.$request("api/order/cart_settle", params)
			// 		.then(({ code, msg, data, time }) => {
			// 			console.log("net", code, msg, data);
			// 			if(code == 1){

			// 			}else{

			// 			}
			// 		}).catch((e) => {
			// 			console.log(e);
			// 		});
			// },
			//提交订单
			submitOrder() {
				let params = {
					token: uni.getStorageSync("token"),
					coupon_id: this.coupon_id, //	 [int]	是	优惠券id		
					goods_id: this.goods_id, //	 [int]	是	商品id		
					spec_name: this.goodsItem.goods.spec_name, // [string]		规格名称复制		
					total_price: this.total_price, //	 [string]	是	总价		
					remarks: this.marks, //	 [string]	是	备注		
					discount_price: this.discount_price, //	 [string]	是	优惠金额
				}
				console.log(params);
				this.$request("api/order/buyNow", params)
					.then(({
						code,
						msg,
						data,
						time
					}) => {
						console.log(code, msg, data);
						if (code == 1) {
							// 生成支付订单
							// add_order_id: "27"
							// money: "3770"
							uni.navigateTo({
								// url: '../role-user/pay?data=' + JSON.stringify(data),
								url: '/pages/role-user/coupon-pay?totlePrice=' + params.total_price +
									'&orderId=' + data,
							})
						} else if (code == 2) {
							uni.showToast({
								title: '优惠券使用成功',
								success() {
									setTimeout(() => {
										uni.reLaunch({
											url:'./coupon'
										})
									}, 1000)
								}
							})
						} else {
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}
					}).catch((e) => {
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #010B24;
	}

	.top-view {
		width: 100%;
		height: 180rpx;
		padding: 0 36rpx;
		border-bottom: 10rpx solid #121C33;
	}

	.top-logo {
		width: 102rpx;
		height: 102rpx;
	}

	.top-right {
		margin-left: 25rpx;
	}

	.top-name {
		font-size: 30rpx;
		color: #FFF;
		font-weight: bold;
	}

	.top-z {
		font-size: 28rpx;
		color: #6F747D;
		margin-top: 8rpx;
	}

	.content-view {
		padding: 0 36rpx;
	}

	.content-title {
		font-size: 30rpx;
		color: #FFF;
		margin-top: 20rpx;
	}

	.content-totle {
		width: 100%;
		font-size: 30rpx;
		color: #FFF;
		margin-top: 20rpx;
		text-align: end;
	}

	.item-view {
		border-bottom: 1rpx solid #1F283E;
		padding: 30rpx 0;
	}

	.item-icon {
		width: 144rpx;
		height: 136rpx;
		margin-right: 30rpx;
	}

	.item-title {
		height: 60rpx;
		overflow: hidden;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #FFF;
	}

	.item-price {
		font-size: 30rpx;
		color: #FFF;
	}

	.item-num {
		font-size: 28rpx;
		color: #6F747D;
		margin-left: 60rpx;
	}

	.item-pn-view {
		justify-content: space-between;
		margin: 10rpx 50rpx 0 0;
	}

	.item-scp {
		font-size: 28rpx;
		color: #6F747D;
	}

	.mark-view {
		padding: 0 36rpx;
	}

	.textarea-view {
		width: 670rpx;
		height: 200rpx;
		border: 1rpx solid #8F99B188;
		border-radius: 20rpx;
		margin-top: 12rpx;
		box-sizing: border-box;
		padding: 18rpx 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.btm-view {
		width: 100%;
		height: 140rpx;
		padding: 0 36rpx;
		justify-content: space-between;
	}

	.btm-price {
		font-size: 28rpx;
		color: #FFF;
	}

	.btn-view {
		width: 250rpx;
		height: 87rpx;
		background-color: #B053FF;
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFF;
	}

	.btn-view:active {
		background-color: #B053FFEE;
	}

	.discount-price {
		color: #B053FF;
	}
</style>
